<template>
  <div class="demo-image">
    <div v-for="image in imageData?.images" :key="image.name" class="block">
      <el-image style="width: 100px; height: 100px" :src="image.url" fit="cover" />
      <el-button type="danger" style="margin-left: 20px" @click="del(image.name)">删除</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import ImageAPI, { type ImageData } from "@/api/system/image.api";

const imageData = ref<ImageData>();

onMounted(() => {
  getImage();
});

// 获取图片资源
const getImage = async () => {
  let result = await ImageAPI.getImagesData();
  imageData.value = result;
};

// 删除选中图片
const del = async (filename: string) => {
  await ImageAPI.delImagesData(filename);
  getImage();
  ElMessage.success("删除图片成功");
};
</script>

<style scoped>
.demo-image .block {
  display: flex;
  align-items: center;
  margin: 30px;
}
</style>
